<template>
  <div
    id="createCoupon"
    class="dialog animated"
    :class="open? 'fadeIn':'fadeOut'"
    v-show="show"
    :style="{visibility: (visible?'visible':'hidden')}"
  >
    <div class="panel animated" :class="open? 'zoomIn':''">
      <div class="title">
        {{title}}
        <div class="close" @click="cancel()"></div>
      </div>
      <div>
        <span class="launch_text">基本信息设置</span>
        <el-form :model="couponData" ref="couponData" label-width="140px">
          <el-form-item label="优惠券名称" :rules="[
      { required: true, message: ''}]">
            <el-input
              ref="couponName"
              style="width:50%"
              clearable
              v-model="couponData.couponName"
              :disabled="isShow"
              placeholder="请输入优惠券名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="优惠券种类" :rules="[
      { required: true, message: ''}]">
            <el-select
              ref="couponType"
              :disabled="isShow"
              style="width:50%"
              v-model="couponData.couponType"
              placeholder="请选择优惠券种类"
              @change="couponTypeChange"
            >
              <el-option
                v-for="item in couponTypeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="优惠面额" :rules="[
      { required: true, message: ''}]">
            <span v-if="couponData.couponType == 2">￥&nbsp;&nbsp;</span>
            <el-input-number
              ref="couponValue"
              size="small"
              controls-position="right"
              class="newclassroomNumber"
              style="width:30%;"
              v-model="couponData.couponValue"
              :disabled="isShow"
              :precision="1"
              :step="0.1"
              :min="0"
              :max="99999"
            ></el-input-number>
            <span v-if="couponData.couponType == 1">&nbsp;&nbsp;折</span>
            <span v-if="couponData.couponType == 2">&nbsp;&nbsp;元</span>
          </el-form-item>
          <el-form-item label="发行数量" :rules="[
      { required: true, message: ''}]">
            <el-input
              ref="issueNum"
              style="width:30%"
              maxlength="9"
              onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
              oninput="value=value.replace(/[^\d]/g,'')"
              v-model="couponData.issueNum"
              :disabled="isShow"
              placeholder="请输入发行数量"
            >
              <template slot="append">张</template>
            </el-input>
          </el-form-item>
          <el-form-item label="优惠期限" :rules="[
      { required: true, message: ''}]">
            <div>
              <el-radio :disabled="isShow" v-model="couponData.couponTermMode" :label="1">起止时间</el-radio>
              <el-date-picker
                id="termTime"
                :disabled="isShow"
                style="width:50%"
                v-model="couponData.termTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00','23:59:59']"
              ></el-date-picker>
            </div>
            <div>
              <el-radio :disabled="isShow||nouseLimits" v-model="couponData.couponTermMode" :label="2">领取之日后</el-radio>
              <el-input
                ref="termDay"
                style="width:30%"
                maxlength="3"
                onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
                oninput="value=value.replace(/[^\d]/g,'')"
                v-model="couponData.termDay"
                :disabled="isShow||nouseLimits"
                placeholder="请输入优惠期限"
              >
                <template slot="append">天</template>
              </el-input>
            </div>
          </el-form-item>
        </el-form>
        <span class="launch_text">使用规则设置</span>
        <el-form :model="couponData" ref="couponData" label-width="140px">
          <el-form-item label="优惠对象" prop="classtext">
            <el-radio-group v-model="couponData.useObjectType" :disabled="isShow">
              <el-radio border :label="1">全部课程</el-radio>
              <el-radio border :label="2">指定课程</el-radio>
            </el-radio-group>
            <el-select
              ref="useCourseId"
              :disabled="isShow"
              v-model="couponData.useCourseIdsList"
              @change="courseChange"
              multiple
              collapse-tags
              style="margin-left: 20px;"
              placeholder="请选择课程"
              v-if="couponData.useObjectType == 2"
            >
              <el-option
                v-for="item in courseList"
                :key="item.courseId"
                :label="item.courseName"
                :value="item.courseId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="使用门槛" :rules="[
      { required: true, message: ''}]">
            <div>
              <el-radio :disabled="isShow" v-model="couponData.useLimitsMode" :label="1" @change="limitsChange">不限</el-radio>
            </div>
            <div>
              <el-radio :disabled="isShow" v-model="couponData.useLimitsMode" :label="2" @change="limitsChange">满</el-radio>
              <el-input
                ref="useLimitsMoney"
                style="width:30%"
                maxlength="9"
                onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
                oninput="value=value.replace(/[^\d]/g,'')"
                v-model="couponData.useLimitsMoney"
                :disabled="isShow||nouseLimits"
                placeholder="请输入金额"
              >
                <template slot="append">可用</template>
              </el-input>
            </div>
            <div>
              <el-radio :disabled="isShow" v-model="couponData.useLimitsMode" :label="3" @change="limitsChange">无须领劵，报名即用</el-radio>
            </div>
          </el-form-item>
          <el-form-item label="每人限领" :rules="[
      { required: true, message: ''}]">
            <el-input
              ref="oneCount"
              style="width:30%"
              maxlength="9"
              onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
              oninput="value=value.replace(/[^\d]/g,'')"
              v-model="couponData.oneCount"
              :disabled="isShow||nouseLimits"
              placeholder="请输入数量"
            >
              <template slot="append">张</template>
            </el-input>
            <span style="color:red;">*</span>每人即每个账户
          </el-form-item>
          <el-form-item label="使用规则">
            <el-input
              ref="useRule"
              :disabled="isShow"
              type="textarea"
              style="width:50%"
              autosize
              placeholder="请输入内容"
              v-model="couponData.useRule"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn_div" v-if="!isShow">
        <div class="btn_sure" @click="sure()">确 认</div>
        <div class="btn_cancel" @click="cancel()">取 消</div>
      </div>
    </div>
  </div>
</template>

<script>
var vm;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      isAdd: true,
      isShow: false,
      title: "",
      couponData: {}, //优惠券数据
      couponTypeList: [], //优惠券类型列表
      courseList: [], //课程列表
      nouseLimits:false,//使用门槛-无须领劵，报名即用
    };
  },
  methods: {
    courseChange(val) {
      console.log(val);
    },
    couponTypeChange(val) {},
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
      let user = tool.getItem(lsKey.user, true); //得到当前用户信息
      //获取数据字典
      let dicdata = tool.getItem(lsKey.dict, true);
      vm.couponTypeList = dicdata["coupon_type"];
      if (data != undefined && data.couponId != null) {
        vm.isAdd = false;
        vm.title = "编辑优惠券";
        if (data.isShow) {
          vm.isShow = true;
          vm.title = "查看优惠券";
        }
        data.useCourseIdsList =
          data.useCourseIds == "" ? [] : data.useCourseIds.split(",");
        if (data.couponTermMode == 1) {
          data.termTime =
            data.termStartTime == null
              ? ""
              : [data.termStartTime+" 00:00:00", data.termEndTime+" 23:59:59"];
        } else {
          data.termTime = "";
        }
        vm.couponData = data;
      } else {
        vm.isAdd = true;
        vm.title = "新增优惠券";
        vm.couponData = {
          couponName: "",
          couponType: "",
          couponValue: "",
          issueNum: "",
          couponTermMode: 1,
          campusId: vm.$store.state.campusId,
          termDay: "",
          termTime: "",
          termStartTime: "",
          termEndTime: "",
          useObjectType: 1,
          useCourseIdsList: [],
          useLimitsMode: 1,
          useLimitsMoney: "",
          useCourseIds: "",
          oneCount: "",
          useRule: ""
        };
      }
      api
        .courseList({ campusId: vm.$store.state.campusId })
        .then(function(data) {
          vm.courseList = data.list;
        });
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      //  vm.imgUrl = "";
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
        vm.isAdd = true;
        vm.isShow = false;
        vm.isEnable = false;
      }, 500);
    },
    sure: function() {
      var rules = [];
      let couponName = this.$refs.couponName;
      let couponType = this.$refs.couponType;
      let couponValue = this.$refs.couponValue;
      let issueNum = this.$refs.issueNum;
      let termDay = this.$refs.termDay;
      let useCourseId = this.$refs.useCourseId;
      let useLimitsMoney = this.$refs.useLimitsMoney;
      let oneCount = this.$refs.oneCount;
      rules.push({
        judge: tool.judge("classname", vm.couponData.couponName),
        focus: couponName,
        tips: "请输入正确的优惠券名称"
      });
      rules.push({
        judge: vm.couponData.couponType,
        focus: couponType,
        tips: "请选择优惠券种类"
      });
      rules.push({
        judge: vm.couponData.couponValue,
        focus: couponValue,
        tips: "请输入优惠面额"
      });
      if (vm.couponData.couponType == 1) {
        rules.push({
          judge: vm.couponData.couponValue < 10,
          focus: couponValue,
          tips: "优惠折扣不能大于或等于10"
        });
      } else {
        rules.push({
          judge: vm.couponData.couponValue <= 99999,
          focus: couponValue,
          tips: "优惠面额不能大于99999"
        });
      }
      rules.push({
        judge: vm.couponData.issueNum,
        focus: issueNum,
        tips: "请输入发行数量"
      });
      if (vm.couponData.couponTermMode == 1) {
        rules.push({
          judge: vm.couponData.termTime,
          focus: $("#termTime"),
          tips: "请选择优惠起止时间"
        });
        
        vm.couponData.termStartTime = vm.couponData.termTime[0];
        vm.couponData.termEndTime = vm.couponData.termTime[1];
        vm.couponData.termDay = "";
      } else {
        rules.push({
          judge: vm.couponData.termDay,
          focus: termDay,
          tips: "请输入优惠期限"
        });
        vm.couponData.termTime = "";
      }

      if (vm.couponData.useObjectType == 2) {
        rules.push({
          judge: vm.couponData.useCourseIdsList,
          focus: useCourseId,
          tips: "请选择指定课程"
        });
        vm.couponData.useCourseIds = "";
        for (let i = 0; i < vm.couponData.useCourseIdsList.length; i++) {
          vm.couponData.useCourseIds +=
            vm.couponData.useCourseIds == ""
              ? vm.couponData.useCourseIdsList[i]
              : "," + vm.couponData.useCourseIdsList[i];
        }
      }

      if (vm.couponData.useLimitsMode == 2) {
        rules.push({
          judge: vm.couponData.useLimitsMoney,
          focus: useLimitsMoney,
          tips: "请输入满减金额"
        });
      } else {
        vm.couponData.useLimitsMoney = "";
      }
      if(!this.nouseLimits)
        rules.push({
          judge: vm.couponData.oneCount,
          focus: oneCount,
          tips: "请输入限领数量"
        });
      if (!tool.validate(rules)) {
        return;
      }

      if (vm.isAdd) {
        api.couponAdd(vm.couponData).then(function(data) {
          if (data.resultCode == 2000) {
            vm.$message({
              message: "添加成功",
              type: "success"
            });
            vm.$emit("callback", "添加成功");
            vm.cancel();
          } else {
            vm.$message.error(data.message);
          }
        });
      } else {
        api.couponUpdate(vm.couponData).then(function(data) {
          if (data.resultCode == 2000) {
            vm.$message({
              message: "编辑成功",
              type: "success"
            });
            vm.$emit("callback", "添加成功");
            vm.cancel();
          } else {
            vm.$message.error(data.message);
          }
        });
      }
    },
    limitsChange(val){
      
      if(val==3){
        this.nouseLimits=true;
        this.couponData.useLimitsMoney='';
        this.couponData.oneCount='';
        this.couponData.termDay='';
        this.couponData.couponTermMode=1;
      }
      else{
        this.nouseLimits=false;
      }
    }
  },
  created: function() {
    vm = this;
  }
};
</script>
<style scoped src="@/style/module/dialog.css"></style>
<style lang="scss">
#createCoupon {
  .el-input-group__append,
  .el-input-group__prepend {
    background-color: #ffffff;
    color: #666666;
    border: 0rem solid #ffffff;
    font-size: 0.16rem;
    padding: 0 0.1rem;
  }
  .el-radio {
    margin-right: 0.1rem;
  }
  .el-input__icon {
    line-height: 0.32rem;
  }
  .el-form-item__label {
    font-size: 0.16rem;
    color: #666666;
  }
  .newclassroomNumber {
    .el-input__inner {
      border-radius: 0.04rem !important;
    }
}
}
</style>

<style scoped>
.el-form-item {
  margin-bottom: 0.1rem;
}

.btn_div {
  margin-top: 0.3rem;
  padding: 0 0 0.3rem 0;
}

.panel {
  width: 10rem;
  padding-bottom: 0.2rem;
}
.ruleForm {
  padding-left: 0.5rem;
}
.el-radio-group {
  line-height: inherit;
}

.tree {
  padding: 0.1rem 0.5rem;
  /* max-height: 5.4rem; */
}
.launch_text {
  color: #999999;
  text-align: left;
  font-size: 0.14rem;
  margin-left: 0.3rem;
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #d3dce6;
}
.grid-content {
  line-height: 0.5rem;
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #453374;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 78px;
  line-height: 78px;
  text-align: center;
}
.avatar {
  max-width: 4rem;
  height: 78px;
  display: block;
  object-fit: cover;
}
</style>
